import React, { Component } from 'react';
import axios from 'axios'
import Item from './Item'
import Page from './components/Page'
class List extends Component {
    state = {
        item: {
            id: 0,
            name: '',
            desc: ''
        }, // 当前操作的那条数据
        list: [], // 存放数据列表
        currentList: [], // 存放当前页的列表
        page: 1,// 当前页数
        pageSize: 3, // 每页的条数
        totalPage: 1, // 总页数= Math.ceil(条数/每页条数)
        visibleAdd: false,  // 添加的弹框不显示 
        visibleEdit: false, // 修改的弹框不显示
    }
    componentWillMount() {
        axios.get('/api/list').then((res) => {

            console.log('api/list res', res);
            // 如果获取导数据，就更新state里的属性
            this.setState({ list: res.data.list });

            this.pageSetting(res.data.list, 1);

        })
    }


    // 重新计算页面分页
    pageSetting(list, page) {

        // 设置当前页
        this.setState({ page: page });

        // 计算总页数
        let totalPage = Math.ceil(list.length / this.state.pageSize);
        this.setState({ totalPage: totalPage });


        // 计算当前页的列表
        let currentList = list.slice((page - 1) * this.state.pageSize, page * this.state.pageSize);
        this.setState({ currentList: currentList });

    }
    render() {
        let { list, currentList, totalPage, page, item } = this.state;

        let arr = [];
        for (let i = 1; i <= totalPage; i++) {
            arr.push(i)
        }

        let goToPage = (page) => {
            console.log('父组件的方法 goToPage被触发 page', page);

            this.pageSetting(this.state.list, page);

        }

        // 删除方法 ，传递给子组件，让子组件调用
        let removeItem = (ritem) => {

            // 二次确认删除
            if (window.confirm('你确定删除吗？')) {
                let index = list.findIndex((item) => item.id + "" === ritem.id + "");
                // 删除数据
                list.splice(index, 1);

                // 更细列表数据
                this.setState({ list: list });

                // 重置分页数据
                this.pageSetting(list, this.state.page);
            }

        }

        // 修改按钮点击方法 传给子组件，让子组件调用
        let editItem = (eitem) => {
            list.forEach((item) => {
                if (item.id + "" === eitem.id + "") {
                    this.setState({ item: item });  // 更新要操作的数据
                }
            });

            // 让修改弹框显示
            this.setState({ visibleEdit: true })
        }


        return (

            <div id="list">

                <button onClick={() => {
                    this.setState({ visibleAdd: true })
                }}>添加</button>


                {/* 渲染列表 */}
                {currentList.map((item) => {
                    return <Item item={item} key={item.id} removeItem={removeItem} editItem={editItem}></Item>
                })}


                 {/* 分页组件 */}
                <Page totalPage={totalPage} goToPage={goToPage} currentPage={page} ></Page>

                {/* 添加弹框 */}
                <div className={this.state.visibleAdd ? 'mask block' : 'hidden'}> <div className={this.state.visibleAdd ? 'modal block' : 'hidden'}>
                    <button onClick={() => {
                        this.setState({ visibleAdd: false })
                    }}>x</button>

                    <p>
                        姓名 {item.name} <input name="name" type="text" value={item.name} onChange={(e) => {


                            this.setState({
                                item: {
                                    name: e.target.value,
                                    desc: item.desc
                                }
                            })
                        }} />
                    </p>

                    <p>
                        描述 {item.desc}<input name="desc" type="text" value={item.desc} onChange={(e) => {
                            this.setState({
                                item: {
                                    name: item.name,
                                    desc: e.target.value
                                }
                            })
                        }} />
                    </p>

                    <button onClick={() => {
                      

                        list.unshift({ ...this.state.item, id: new Date().getTime(), image: 'http://dummyimage.com/100X100/f27999&text=' + item.name });
                        // 更新数据
                        this.setState({ list: list });
                        // 更新分页设置
                        this.pageSetting(list, 1);

                        // 关闭模式框
                        this.setState({ visibleAdd: false });
                        

                         // 清空当前操作数据
                        this.setState({ item: { name: '', desc: '', id: 0, image: '' } });
                    }}>添加</button>


                </div></div>


                 {/* 修改弹框 */}
                <div className={this.state.visibleEdit ? 'mask block' : 'hidden'}> <div className={this.state.visibleEdit ? 'modal block' : 'hidden'}>
                    <button onClick={() => {
                        this.setState({ visibleEdit: false })
                    }}>x</button>

                    <p>id: {item.id}</p>



                    <p>
                        姓名 {item.name} <input name="name" type="text" value={item.name} onChange={(e) => {


                            this.setState({
                                item: {
                                    id: item.id,
                                    image: item.image,
                                    name: e.target.value,
                                    desc: item.desc
                                }
                            })
                        }} />
                    </p>

                    <p><img src={item.image} alt="" /></p>

                    <p>
                        描述 {item.desc}<input name="desc" type="text" value={item.desc} onChange={(e) => {
                            this.setState({
                                item: {
                                    id: item.id,
                                    image: item.image,
                                    name: item.name,
                                    desc: e.target.value
                                }
                            })
                        }} />
                    </p>

                    <button onClick={() => {

                       
                        let index = list.findIndex((curitem) => curitem.id + "" === item.id + "");
                        list.splice(index, 1, item); // 删除数据 再把item添加进来 就等于修改
                        // 更新数据
                        this.setState({ list: list });
                      
                        // 更新分页设置
                        this.pageSetting(list, this.state.page);

                        // 关闭模式框
                        this.setState({ visibleEdit: false });

                        // 清空当前操作数据
                        this.setState({ item: { name: '', desc: '', id: 0, image: '' } });


                    }}>修改</button>

                </div></div>





            </div>
        )
    }
}

export default List;